<template>
	<view class="wrap">
		<view class="header">
			<view class="header_1"></view>
			<view class="header_2">
				<view class="header_3">
					<text @click="dangqian" :class="newIndex === 0 ? 'act':''">当前订单</text>
				</view>
				<view class="header_4">
					<text @click="lishiList" :class="newIndex === 1 ? 'act':''">历史订单</text>
				</view>
				<view :class="newIndex === 0?'active':'active1'"></view>
			</view>
		</view>
		<view class="main">
			<transition name="my">
				<view class="main_1">
					<view :class="newIndex===0?'center':'centeraa'">
						<view class="main_2"  v-if="data.length>=1?true:false" v-for="(item,index) in data"
							:key="index" @click="deveolment(item)">
							<view class="main_2_top">
								<text class="l">美年广场</text><text class="r">{{item.sta==0?'已完成':'已取消'}}</text>
							</view>
							<view class="main_2_time">
								<text>2020-1-22 16:19:20</text>
							</view>
							<view class="main_2_img">
								<view class="imgList">
									<image :src="item.img"></image>
								</view>
								<view class="imgList1">
									<view>
										<text>￥{{item.price}}</text>
									</view>
									<view><text class="jian">共1件</text></view>
								</view>
							</view>
							<view class="main_2_btn">
								<navigator url="/pages/ordermeal/ordermeal" open-type="reLaunch"
									hover-class="other-navigator-hover">
									<text class="z">再来一单</text>
								</navigator>
								<text @click="deveolment(item)" class="k">开发票</text>
							</view>
						</view>
						<view class="ml">没有更多了~</view>
					</view>
					<view :class="newIndex===1?'center':'center1'">
						<view class="main_2" v-if="order.length>=1?true:false" v-for="(item,index) in order"
							:key="index" @click="navRouter(item)">
							<view class="main_2_top">
								<text class="l">美年广场</text> <text class="r">{{item.sta==0?'已完成':item.sta==1?"已取消":''}}</text>
							</view>
							<view class="main_2_time">
								<text>2020-1-22 16:19:20</text>
							</view>
							<view class="main_2_img">
								<view class="imgList">
									<view class="imgList_auto">
										<image :src="item.img" mode=""></image>
									</view>

								</view>
								<view class="imgList1">
									<view><text>￥{{item.price}}</text> </view>
									<view><text class="jian">共1件</text></view>
								</view>
							</view>

							<view class="main_2_btn">
								<navigator url="/pages/ordermeal/ordermeal" open-type="reLaunch"
									hover-class="other-navigator-hover">
									<text class="z">再来一单</text>
								</navigator>
							</view>
						</view>
						<view class="ml">没有更多了~</view>
					</view>
				</view>
			</transition>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				newIndex: 0,
				order: [],
				data:[],
			
			}
		},
		created() {
	
			request('/listAll',{},'GET').then(res => {
				uni.showLoading({
				 title: '加载中',
				})
				this.order = res
				this.data=res.filter((item)=>{
						return item.sta.indexOf(0)>-1
				})
				if(this.order.length>1){
					setTimeout(()=>{
						 uni.hideLoading();
					},1000)
				}
			});
			
		},
		methods: {
			onLoad() {
				uni.showLoading({
				title: '加载中',
			})	
			},
			dangqian() {
				this.newIndex = 0;
				
			},
			lishiList() {
				this.newIndex = 1;
			},
			deveolment(val) {

				uni.navigateTo({
					url: `../details/details?data=${encodeURIComponent(JSON.stringify(val))}`,
				})
			},
			navRouter(val) {
					if(val.sta==0){
						uni.navigateTo({
							url: `../details/details?data=${encodeURIComponent(JSON.stringify(val))}`,
						})
					}else if(val.sta==1){
						uni.navigateTo({
							url: `../orderCancelled/orderCancelled?data=${encodeURIComponent(JSON.stringify(val))}`
						})
					}
				
			},
			
		}
	}
</script>

<style scoped>
	* {
		margin: 0;
		padding: 0;
	}

	.wrap {
		width: 100vw;
		height: 100vh;
		background-color: #fff;
	}

	.header {
		width: 100%;
		height: 100px;
		background: #fff;
	}

	.header .header_1 {
		width: 100vw;
		height: 50%;
		float: left;
	}

	.header .header_2 {
		width: 100vw;
		height: 50%;
		float: left;
		position: relative;
		line-height: 60px;
		font-size: 13px;
	}

	.header_2 .dangqian {
		width: 38px;
		height: 4px;
		background-color: rgba(219, 168, 113);
		position: absolute;
		left: 20%;
		bottom: 0;
	}

	.act {
		color: rgba(219, 168, 113);
	}

	.active {
		width: 38px;
		height: 4px;
		background-color: rgba(219, 168, 113);
		position: absolute;
		left: 20%;
		bottom: 0;
		transition: all 0.2s ease;
	}

	.active1 {
		width: 38px;
		height: 4px;
		color: rgba(219, 168, 113);
		background-color: rgba(219, 168, 113);
		position: absolute;
		left: 70%;
		bottom: 0;
		transition: all 0.2s ease;
	}

	.header .header_3 {
		width: 50%;
		text-align: center;
		float: left;
		position: relative;
	}

	.header .header_4 {
		width: 50%;
		text-align: center;
		float: right;
		position: relative;
	}

	.header_2 .header_4 .lishi {
		width: 38px;
		height: 4px;
		background-color: rgba(219, 168, 113);
		position: absolute;
		left: 40%;
		bottom: 10px;
	}

	.main {
		position: absolute;
		left: 0;
		width: 100vw;
		height: calc(100vh - 100px);
		overflow: hidden;
		background-color: rgba(246, 246, 246);
	}

	.main_2 {
		width: 100vw;
		height: 235px;
		float: left;
		margin-top: 15px;
		background-color: #fff;
	}
	.center {
		width: 100vw;
		height: 100%;
		z-index: 999;
		overflow: auto;
		left: 0;
		margin-left: 0;
		position: absolute;
		transition: all 0.2s ease;
	}

	.centeraa {
		width: 100vw;
		height: 100%;
		overflow: auto;
		z-index: 999;
		left: -100vw;
		position: absolute;
		transition: all 0.2s ease;
	}

	.center1 {
		width: 100vw;
		height: 100%;
		overflow: auto;
		z-index: 999;
		position: absolute;
		left: 100vw;
		margin-left: 100vw;
		transition: all 0.2s ease;
	}

	.ml {
		position: relative;
		width: 100vw;
		height: 60px;
		bottom: 0;
		float: left;
		line-height: 60px;
		font-size: 13px;
		color: rgba(170, 170, 170);
		text-align: center;

	}

	.v-enter-active,
	.v-leave-active {
		transition: all 0.8s ease;

	}

	.my-enter,
	.my-leave-to {
		opacity: 0;
		/*透明度*/
		transform: translateX(70px);
	}

	.my-enter-active,
	.my-leave-active {
		transition: all 0.8s ease;
	}

	.main_2_top {
		width: 100vw;
		height: 48px;
		float: left;
		line-height: 68px;
	}

	.main_2_top .l {
		float: left;
		margin-left: 15px;
		color: rgba(0, 0, 0);
	}

	.main_2_top .r {
		float: right;
		margin-right: 15px;
		font-size: 13px;
		color: rgba(170, 170, 170);
	}

	.main_2_time {
		width: 100vw;
		height: auto;
		float: left;
	}

	.main_2_time text {
		font-size: 13px;
		color: rgba(170, 170, 170);
		margin-left: 15px;
	}

	.main_2_img {
		width: 100vw;
		height: 100px;
		float: left;
	}

	.main_2_img view image {
		width: 82px;
		height: 90px;
		margin: 5px 2px;
		float: left;
	}

	.imgList {
		width: 75%;
		height: 100px;
		float: left;
		margin-left: 15px;
	}

	.imgList_auto {
		overflow-y: auto;
		width: 100%;
		height: 100%;

	}

	.imgList1 {
		width: 20%;
		height: 100px;
		float: right;
	}

	.imgList1 view {
		width: 100%;
		float: left;
		height: 20px;
	}

	.imgList1 view text {
		float: right;
		line-height: 120px;
		margin-right: 15px;
	}

	.jian {
		float: right;
		font-size: 13px;
		color: rgba(170, 170, 170);
	}

	.main_2_btn {
		width: 97%;
		height: 45px;
		float: left;
	}

	.main_2_btn text {
		width: 84px;
		height: 28px;
		line-height: 28px;
		font-size: 13px;
		margin-top: 20px;
		margin: 20px 5px;
		text-align: center;
		float: right;
	}

	.main_2_btn text:hover {
		border: 1px solid #007AFF;
	}

	.main_2_btn .z {
		border: 1px solid rgba(219, 172, 126);
		color: rgba(219, 172, 126);
	}

	.main_2_btn .k {
		border: 1px solid rgba(215, 215, 215);
		color: rgba(127, 127, 127);
	}
</style>
